const templateA = `
<ul class="list">
  <h1>{{ title }}</h1>
  {{ dateTime }}
  <for data-key="list" data-tag="li" class="item">
    <span>姓名：{{name}}</span>
    <span>年龄：{{age}}</span>
  </for>
</ul>
`;

function TestA() {
  const state = createReactive({
    title: "学生信息列表",
    dateTime: "2021-02-03 10:23",
    list: [
      {
        id: 1,
        name: "张三",
        age: 18,
      },
      {
        id: 2,
        name: "李四",
        age: 20,
      },
      {
        id: 3,
        name: "王五",
        age: 22,
      },
    ],
  });

  return [templateA, state];
}

const templateB = `
  <ul class="list">
    <h1>{{ title }}</h1>
    {{ dateTime }}
    <for data-key="list" data-tag="li"  class="item">
      <span>Name：{{name }}</span>
      <span>Age：{{ age }}</span>
    </for>
  </ul>
`;

function TestB() {
  const state = createReactive({
    title: "老师信息列表",
    dateTime: "2021-02-03 10:26",
    list: [
      {
        id: 1,
        name: "小明",
        age: 26,
      },
      {
        id: 2,
        name: "小红",
        age: 28,
      },
      {
        id: 3,
        name: "小李",
        age: 40,
      },
    ],
  });

  return [templateB, state];
}
